<template>
  <div class="articleList">
    <div>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <!-- <van-cell
            v-for="(item) in articles"
            :key="item.art_id"
            :title="item.title"
            :label="item.pubdate"
          > -->
            <articleItem 
              v-for="(item) in articles"
              :key="item.art_id"
              :article='item'
             ></articleItem>
          <!-- </van-cell> -->
          
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import { articles } from "@/api/user";
export default {
  data() {
    return {
      parmas: {
        channel_id: this.channel.id,
        timestamp: Date.now(),
        with_top: 0,
      },
      articles: [],
      isLoading: false,
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  components:{
    articleItem:()=>import('@/components/article-item.vue'),
   
  },
  props: ["channel"],
  methods: {
    getArticles() {
      articles(this.parmas)
        .then((res) => {
          const results = res.data.data.results;
          console.log(results)
          this.articles.unshift(...results);
          this.parmas.timestamp = res.data.data.pre_timestamp
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 下拉刷新
    onRefresh() {
      console.log("下拉加载");
      articles(this.parmas)
        .then((res) => {
          const results = res.data.data.results;
          this.articles.unshift(...results);
          this.parmas.timestamp = res.data.data.pre_timestamp
          this.isLoading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 下拉加载
    onLoad() {
      console.log("加载更多");
      articles(this.parmas)
        .then((res) => {
          const results = res.data.data.results;
          console.log(results)
          this.articles.push(...results);
          this.parmas.timestamp = res.data.data.pre_timestamp
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    // this.parmas.timestamp = Date.now()
    this.getArticles();
  },
};
</script>